<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width" />
		<title>更新研发项目</title>
		
		<link href="../../Content/themes/table.css" rel="stylesheet" />
		<link href="../../Content/formstyles.css" rel="stylesheet" />
		<script src="../../Content/js/common.js"></script>
       
	</head>
	<body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>'Hello, world!' example</title>
    <style type="text/css">
        #the-canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <link href="../../Scripts/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-easyui/jquery.min.js"></script>
    <script src="../../Scripts/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="../../Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="../../Content/themes/icon.css" rel="stylesheet" />
    <script src="../../Content/plugin/pdfjs/build/pdf.js"></script>

    <h1>PDF.js 'Hello, base64!' example</h1>
    <canvas id="the-canvas"></canvas>
</body>
<script type="text/javascript">
    /**
     *坑：
     * 之前版本（具体版本分界线我也不知道，我下载 的是2.0.943版本）写法：
     *      PDFJS.workerSrc = '../build/pdf.worker.js';//加载核心库
     *      PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
     *
     *      })
     * 2.0.943版本写法：
     *      pdfjsLib.GlobalWorkerOptions.workerSrc ='../build/pdf.worker.js';
     *      pdfjsLib.getDocument(url).then(function(pdf){
     *
     *      });
     */
    pdfjsLib.GlobalWorkerOptions.workerSrc = 
                    '../../Content/plugin/pdfjs/build/pdf.worker.js';
    var loadingTask = pdfjsLib.getDocument({ url: _url, });//  _url为后台请求pdf流的路径
    loadingTask.promise.then(function (pdf) {
        pdf.getPage(1).then(function (page) {
            /**
             * 坑：
             * 官网上给的例子是这样写的
             *      var scale = 1.5;
             *      var viewport = page.getViewport({ scale: scale, });
             * 但是！！我们要这样写：
             *      var scale = 1.5;
             *      var viewport = page.getViewport(scale);
             */
            var scale = 1.5;
            var viewport = page.getViewport(scale);
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: context,
                viewport: viewport,
            };
            page.render(renderContext);
        });
    });
</script>
</html>
